<template>
	<view class="content">
		<view class="header">角色专家介绍</view>
		<view  class="my-service-title" @click="handleNavBarBack">
			<uv-icon name="arrow-left" size="30rpx" color="#fff"></uv-icon>
		</view>
		
		<view class="search">
			<uv-search placeholder="请输入专家名称" v-model="keyword" :showAction="false" @change="searchFun"></uv-search>
		</view>
		
		<view class="card">
		  <view v-for="(group, groupIndex) in groupedExperts" :key="groupIndex">
		    <!-- 显示首字母标题 -->
		    <view class="letter-header">
		      {{ group.letter }}<text class="text">（姓氏首字母，排名不分先后）</text>
		    </view>
		    
		    <!-- 遍历该分组下的专家 -->
		    <view v-for="(item, index) in group.items" :key="index" class="list"  @click="openFun(item)">
		      <view class="img">
		        <image :src="item.img" style="width: 100%;" mode="widthFix"></image>
		      </view>
		      <view class="info">
		        <view class="name">
		          {{ item.name }} <view class="span">{{ item.position }}</view>
		        </view>
		        <view class="company">{{ item.company }}</view>
		      </view>
		      <view class="icon">
		        <uv-icon name="arrow-right" color="#9CA3AF" size="28rpx"></uv-icon>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import { ref,computed } from 'vue';
	import { expertData } from './expertList.js';
	const keyword = ref('')
	const expertFilterList = ref([...expertData])
	const firstLetter = ref([]);
	
	// 分组计算属性
	const groupedExperts = computed(() => {
	  const groups = {};
	  const result = [];
	  
	  expertFilterList.value.forEach(item => {
	    const letter = item.firstLetter;
	    if (!groups[letter]) {
	      groups[letter] = {
	        letter,
	        items: []
	      };
	      result.push(groups[letter]);
	    }
	    groups[letter].items.push(item);
	  });
	  
	  // 按字母排序
	  return result.sort((a, b) => a.letter.localeCompare(b.letter));
	});
	
	const searchFun = () => {
	  expertFilterList.value = expertData.filter(it => 
	    it.name.includes(keyword.value)
	  );
	};

	
	// 返回
	const handleNavBarBack = () => {
		uni.navigateBack();
	}
	
	const imgReturn = (item) => {
		let index = expertData.findIndex(it => it.name == item.name)
		let i = index+1
		return `https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/expert/图片${i}.png`
	}
	
	const openFun = (item) => {
		let index = expertData.findIndex(it => it.name == item.name)
		uni.navigateTo({url: `/pages/expert/expertDetails?expertId=${index}`})
	}
	
	//分享函数
	const getWin =  async () => { 
		 const currentUrl = 'https://www.yunyakeji.top/';
		
		 // 请求后端获取签名配置
		const res = await vk.callFunction({
			url: 'client/token/pub/index',
			data: { url: currentUrl } // 传递当前URL
		});
		
		const config = res;
		console.log('config',config)
		// 初始化微信SDK
		jWeixin.config({
			debug: false,
			appId: config.appId,
			timestamp: config.timestamp,
			nonceStr: config.noncestr,
			signature: config.signature,
			jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData','onMenuShareAppMessage','onMenuShareTimeline']
		});
		
		jWeixin.ready(() => {
		    // 自定义“分享给朋友”
			 const shareConfig = {
				title: '2025天津市第四届海河肺癌诊疗新进展学术会议',
				desc: '会议日期：6月21日～22日，会议场地：天津梅江中心皇冠假日酒店', // 分享描述
				link: currentUrl, // 使用当前URL
				imgUrl: 'https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/WechatIMG192.webp', // 分享图标
			};
			
		    jWeixin.updateAppMessageShareData(shareConfig);
		
		    // 自定义“分享到朋友圈”
		    jWeixin.updateTimelineShareData(shareConfig);
			
			// 兼容旧版API
			  jWeixin.onMenuShareAppMessage(shareConfig);
			  
			  jWeixin.onMenuShareTimeline(shareConfig);
		});
		
		jWeixin.error(err => {
			console.error('微信SDK初始化失败', err);
		});
	}
	
	onLoad(() => {
		getWin()
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		max-width: 750px;
		height: 100vh;
		background: no-repeat center bottom;
		background-size: auto 100%;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin: 0 auto;
		background-color: #f9fafb;
		

		.header {
			width: 100%;
			height: 112rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 36rpx;
			color: #111827;
			margin-bottom: 16rpx;
			
		}
		
		.my-service-title {
			width: 54rpx;
			height: 54rpx;
			background: rgba(24, 31, 67, 0.16);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 30rpx;
			left: 30rpx;
			z-index: 99;
		}
		
		
		.search{
			width: 100%;
			height: auto;
			padding: 20rpx 32rpx;
			margin-bottom: 16rpx;
			background-color: #fff;
			box-sizing: border-box;
		}
		
		.card{
			width: 100%;
			flex: 1;
			overflow-y: auto;
			
			.letter-header {
			  padding: 20rpx 32rpx;
			  background-color: #f3f4f6;
			  font-weight: bold;
			  font-size: 32rpx;
			  color: #4b5563;
			  
			  .text{
				  font-size: 22rpx;
				  color: #b9b9b9;
				  font-weight: 500;
			  }
			}
			
			.list{
				width: 100%;
				height: auto;
				padding: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #F3F4F6;
				background-color: #fff;
				box-sizing: border-box;
				
				.img{
					width: 120rpx;
					height: auto;
					min-height: 100rpx;
					margin-right: 24rpx;
					border-radius: 12rpx;
				}
				
				.info{
					flex: 1;
					
					.name{
						width: 100%;
						height: 42rpx;
						font-family: Roboto, Roboto;
						font-weight: 700;
						font-size: 36rpx;
						color: #111827;
						line-height: 42rpx;
						display: flex;
						margin-bottom: 16rpx;
						align-items: baseline;
						
						.span{
							padding-left: 10rpx;
							font-family: Roboto, Roboto;
							font-weight: 400;
							font-size: 28rpx;
							color: #6B7280;
						}
					}
					
					.company{
						width: 100%;
						font-family: Roboto, Roboto;
						font-weight: 400;
						font-size: 28rpx;
						color: #6B7280;
						line-height: 40rpx;
					}
				}
			
				.icon{
					width: 50rpx;
				}
			}
		}
	}
</style>